﻿@using LdCms.EF.DbModels
@using LdCms.Common.Extension
@using LdCms.Common.Utility
@model Ld_Info_Artice
@{
    ViewData["Title"] = "Add";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<nav class="breadcrumb">
    <i class="Hui-iconfont">&#xe67f;</i> 首页<span class="c-gray en">&gt;</span>内容管理<span class="c-gray en">&gt;</span>资讯管理<span class="c-gray en">&gt;</span>新增
    <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新"><i class="Hui-iconfont">&#xe68f;</i></a>
</nav>

<div class="page-container">
    <form action="@Url.Action("Save",new { ArticeID = Model.ArticeID })" class="form form-horizontal" id="form-add" method="post">
        <div id="tab-system" class="HuiTab">
            <div class="tabBar cl">
                <span>基本信息</span>
                <span>更多信息</span>
                <span>SEO设置</span>
            </div>
            <div class="tabCon">
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-1"><span class="c-red">*</span>资讯标题：</label>
                    <div class="formControls col-xs-8 col-sm-9">
                        <input type="text" class="input-text" value="@Model.Title" placeholder="" id="fTitle" name="fTitle" />
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-1" id="aa">略缩图：</label>
                    <div class="formControls col-xs-8 col-sm-10">
                        <div class="file-content">
                            <ul id="filelist" class="filelist" data-QueuedQuantity="0">
                                <li id="picker" class="picker"><img src="~/admin/static/h-ui.admin/images/image.png" width="100" height="100" /></li>
                            </ul>
                            <ul id="uploadSuccessList" alt="" style="display:none;"></ul>
                            <div style="display:none;"><input id="fImgSrc" name="fImgSrc" type="text" value="" /></div>
                        </div>
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-1">内容：</label>
                    <div class="formControls col-xs-8 col-sm-9">
                        <script type="text/plain" id="fContent" name="fContent" style="width:100%;height:300px;">
                            @(Html.Raw(Utility.ContentDecode(Model.Content)))
                        </script>
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-1">审核：</label>
                    <div class="formControls col-xs-8 col-sm-9 skin-minimal">
                        <div class="check-box">
                            <input type="checkbox" id="fState" name="fState" value="1" @(Model.State.ToBool() ? "checked" : "") />
                            <label for="checkbox-1">&nbsp;</label>
                        </div>
                    </div>
                </div>
            </div>
            <div class="tabCon">
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-1"><span class="c-red">*</span>所属栏目：</label>
                    <div class="formControls col-xs-8 col-sm-9">
                        <span class="select-box">
                            <select class="select" size="1" id="fClassId" name="fClassId">
                                <option value="@ViewData["ClassID"]">@ViewData["ClassName"]</option>
                            </select>
                        </span>
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-1"><span class="c-red">*</span>作者：</label>
                    <div class="formControls col-xs-8 col-sm-9">
                        <input type="text" class="input-text" value="@Model.Author" placeholder="" id="fAuthor" name="fAuthor" />
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-1"><span class="c-red">*</span>来源：</label>
                    <div class="formControls col-xs-8 col-sm-9">
                        <input type="text" class="input-text" value="@Model.Source" placeholder="" id="fSource" name="fSource" />
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-1"><span class="c-red">*</span>外部链接：</label>
                    <div class="formControls col-xs-8 col-sm-9">
                        <input type="text" class="input-text" value="@Model.Url" placeholder="" id="fUrl" name="fUrl" />
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-1"><span class="c-red">*</span>人气：</label>
                    <div class="formControls col-xs-8 col-sm-9">
                        <input type="text" class="input-text" value="@Model.Hits" placeholder="" id="fHits" name="fHits" />
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-1"><span class="c-red">*</span>配顶：</label>
                    <div class="formControls col-xs-8 col-sm-9 skin-minimal">
                        <div class="check-box">
                            <input type="checkbox" id="fIsTop" name="fIsTop" value="1" @(Model.IsTop.ToBool() ? "checked" : "") />
                            <label for="checkbox-1">&nbsp;</label>
                        </div>
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-1"><span class="c-red">*</span>推荐：</label>
                    <div class="formControls col-xs-8 col-sm-9 skin-minimal">
                        <div class="check-box">
                            <input type="checkbox" id="fIsPush" name="fIsPush" value="1" @(Model.IsPush.ToBool() ? "checked" : "") />
                            <label for="checkbox-1">&nbsp;</label>
                        </div>
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-1"><span class="c-red">*</span>开启评论：</label>
                    <div class="formControls col-xs-8 col-sm-9 skin-minimal">
                        <div class="check-box">
                            <input type="checkbox" id="fAllowComment" name="fAllowComment" value="1" @(Model.AllowComment.ToBool() ? "checked" : "") />
                            <label for="checkbox-1">&nbsp;</label>
                        </div>
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-1"><span class="c-red">*</span>评论开始：</label>
                    <div class="formControls col-xs-8 col-sm-9">
                        <input type="text" class="input-text" value="@Model.CommentStartTime" placeholder="" id="fCommentStartTime" name="fCommentStartTime" onfocus="WdatePicker({ maxDate:'#F{$dp.$D(\'fCommentEndTime\')||\'%y-%M-%d\'}' })" />
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-1"><span class="c-red">*</span>评论结束：</label>
                    <div class="formControls col-xs-8 col-sm-9">
                        <input type="text" class="input-text" value="@Model.CommentEndTime" placeholder="" id="fCommentEndTime" name="fCommentEndTime" onfocus="WdatePicker({ minDate:'#F{$dp.$D(\'fCommentStartTime\')}',maxDate:'%y-%M-%d' })" />
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-1"><span class="c-red">*</span>标签：</label>
                    <div class="formControls col-xs-8 col-sm-9">
                        <input type="text" class="input-text" value="@Model.Tags" placeholder="" id="fTags" name="fTags" />
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-1"><span class="c-red">*</span>发布时间：</label>
                    <div class="formControls col-xs-8 col-sm-9">
                        <input type="text" class="input-text" value="@Model.CreateDate" placeholder="" id="fCreateDate" name="fCreateDate" />
                    </div>
                </div>
            </div>
            <div class="tabCon">
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-1"><span class="c-red">*</span>标题：</label>
                    <div class="formControls col-xs-8 col-sm-9">
                        <input type="text" class="input-text" value="@Model.TitleBrief" placeholder="" id="fTitleBrief" name="fTitleBrief" />
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-1"><span class="c-red">*</span>关键字：</label>
                    <div class="formControls col-xs-8 col-sm-9">
                        <input type="text" class="input-text" value="@Model.Keyword" placeholder="" id="fKeyword" name="fKeyword" />
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-1">描述：</label>
                    <div class="formControls col-xs-8 col-sm-9">
                        <textarea id="fDescription" name="fDescription" class="textarea" placeholder="说点什么...100个字符以内" dragonfly="true">@Model.Description</textarea>
                        <p class="textarea-numberbar"><em class="textarea-length"></em>/100</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="row cl">
            <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-1">
                <button class="btn btn-primary radius" type="submit"><i class="Hui-iconfont">&#xe632;</i> 保存 </button>
                <a href="@Url.Action("ListClass",new { ClassID = ViewData["ClassID"] })" class="btn btn-default radius" type="button"><i class="Hui-iconfont">&#xe684;</i> 返回 </a>
            </div>
        </div>
    </form>
</div>
@*
    --------------
    页面底部JS脚本
    --------------
*@
@section css{
    <link href="~/admin/lib/webuploader/0.1.5/webuploader.css" rel="stylesheet" type="text/css" />
}
@section scripts{
    <!--请在下方写此页面业务相关的脚本-->
    <script type="text/javascript" src="~/admin/lib/My97DatePicker/4.8/WdatePicker.js"></script>
    <script type="text/javascript" src="~/admin/lib/jquery.validation/1.14.0/jquery.validate.js"></script>
    <script type="text/javascript" src="~/admin/lib/jquery.validation/1.14.0/validate-methods.js"></script>
    <script type="text/javascript" src="~/admin/lib/jquery.validation/1.14.0/messages_zh.js"></script>
    <script type="text/javascript" src="~/admin/lib/webuploader/0.1.5/webuploader.min.js"></script>
    <script type="text/javascript" src="~/admin/lib/ueditor/1.4.3/ueditor.config.js"></script>
    <script type="text/javascript" src="~/admin/lib/ueditor/1.4.3/ueditor.all.min.js"></script>
    <script type="text/javascript" src="~/admin/lib/ueditor/1.4.3/lang/zh-cn/zh-cn.js"></script>
    <script type="text/javascript" src="~/admin/static/h-ui.admin/js/ldcms.admin.webuploader.js"></script>
    <script type="text/javascript">
        (function ($) {
            $.mainu = {
                init: function () {
                    $('.skin-minimal input').iCheck({
                        checkboxClass: 'icheckbox-blue',
                        radioClass: 'iradio-blue',
                        increaseArea: '20%'
                    });
                    $("#fDescription").Huitextarealength({
                        minlength: 4,
                        maxlength: 100
                    });
                    $("#tab-system").Huitab({
                        index: 0
                    });
                    $.mainu.initImageArray();
                    $.mainu.ueditorInit();                                  //百度在线编辑器
                    $(".webuploader-pick").removeClass("webuploader-pick"); //去除百度上传组件选择按钮底色
                },
                initImageArray: function () {
                    var imageArray = @Html.Raw(string.IsNullOrEmpty(Model.ImgArray)?"[]": Model.ImgArray);
                    $list = $("#filelist");
                    $successList = $("#uploadSuccessList");
                    $list.attr({ "data-QueuedQuantity": imageArray.length });
                    if (imageArray.length >= 9) {
                        $("#picker").hide();
                    }
                    var $li = "";
                    var $successli = "";
                    for (var i = 0; i < imageArray.length; i++) {
                        if (imageArray[i].length > 0) {
                            var fileName = imageArray[i].replace(/(.*\/)*([^.]+).*/ig, "$2");
                            $li += `
                            <li id="img_${fileName}">
                                <p class="title">' + file.name + '</p>
                                <p class="imgWrap"><img src="${imageArray[i]}" width="100" height="100"/></p>
                                <div class="img-del-base">
                                    <div class="img-del-bj hide"><a href="javasccript:;" data-id="${fileName}">删除</a></div>
                                    <div class="up-result hide">成功</div>
                                </div>
                            </li>
                            `;
                            $successli += `<li id="img_${fileName}">${imageArray[i]}</li>`;
                        }
                    }
                    $list.prepend($li);
                    $successList.append($successli);

                    $list.find(".imgWrap").on("mouseenter", function () {
                        console.log("a1");
                        var $this = $(this).parent("li");
                        $this.find(".img-del-base").find(".img-del-bj").removeClass("hide");
                    });
                    $list.find(".img-del-base .img-del-bj").on("mouseleave", function () {
                        console.log("a2");
                        $(this).addClass("hide");
                    });
                    $list.find(".img-del-bj").find("a").on("click", function () {
                        console.log("a3");
                        var fileId = $(this).attr("data-id");
                        $list.find("#img_" + fileId).remove();;
                        $successList.find("#img_" + fileId).remove();
                        var fileQueuedQuantity = parseInt($list.attr("data-QueuedQuantity")) - 1;
                        $list.attr({ "data-QueuedQuantity": fileQueuedQuantity });
                        if ((fileQueuedQuantity) < 9) {
                            $("#picker").find("div:eq(1)").css({ "width": "100px", "height": "100px" });
                            $("#picker").show();
                        }
                    });
                },
                ueditorInit: function () {
                    var ue = UE.getEditor('fContent');
                    ue.ready(function () {
                        ue.setHeight(300);
                    });
                },
                formSubmit: function () {
                    $("#form-add").validate({
                        rules: {
                            fTitle: {
                                required: true,
                                minlength: 2,
                                maxlength: 200
                            },
                            fAuthor: {
                                maxlength: 4
                            },
                            fContent: {
                                required: true
                            }
                        },
                        onkeyup: false,
                        focusCleanup: true,
                        success: "valid",
                        submitHandler: function (form) {
                            var fClassName = $("select[name='fClassId']").find("option:selected").text();
                            var fAllowComment = $("input[name='fAllowComment']").is(':checked');
                            var fIsPush = $("input[name='fIsPush']").is(':checked');
                            var fIsTop = $("input[name='fIsTop']").is(':checked');
                            var fState = $("input[name='fState']").is(':checked');
                            var fImgArray = [];
                            $("#uploadSuccessList li").each(function () {
                                fImgArray.push($(this).text());
                            });
                            $(form).ajaxSubmit({
                                type: "POST",
                                cache: false,
                                data: {
                                    fClassName: fClassName,
                                    fAllowComment: fAllowComment,
                                    fIsPush: fIsPush,
                                    fIsTop: fIsTop,
                                    fState: fState,
                                    fImgArray: fImgArray
                                },
                                dataType: "json",
                                error: function (XMLHttpRequest, textStatus, errorThrown) {
                                    if (XMLHttpRequest.status != 200) {
                                        layer.alert("POST[FAIL]", { icon: 5 });
                                    }
                                },
                                success: function (result) {
                                    var state = result.state;          //错误代码
                                    var message = result.message;        //错误说明
                                    if (state == "success") {
                                        layer.msg(message, { icon: 1, time: 3000 });
                                    } else {
                                        layer.msg(message, { icon: 5, time: 3000 });
                                    }
                                }
                            });
                        }
                    });
                }
            };
            $(function () {
                $.mainu.init();
                $.mainu.formSubmit();
            });
        })(jQuery);
    </script>
}

